<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="next">
          <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">«上一页</button>
        </li>
        <li class="dotted" v-if="startAndEndNum.start > 1"><span>...</span></li>
        <li class="active disabled prev">
          <button :class="{ active: pageNo == page }" v-for="(page, index) in startAndEndNum.end" :key="index" v-show="page >= startAndEndNum.start" @click="$emit('getPageNo', page)">{{ page }}</button>
        </li>
        <li class="dotted" v-if="startAndEndNum.end < totalPage"><span>...</span></li>
        <li class="next">
          <!-- <a @click="$emit('getPageNo', page)" :class="{ active: pageNo == page }">下一页»</a> -->
          <button :disabled="pageNo == totalPage" @click="$emit('getPageNo', pageNo + 1)">下一页»</button>
        </li>
      </ul>
      <div>
        <span>共{{ totalPage }}页&nbsp;</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: ['pageNo', 'pageSize', 'total', 'continues'],
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    startAndEndNum() {
      const { continues, pageNo, totalPage } = this;
      let start = 0;
      let end = 0;
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        start = pageNo - Math.floor(continues / 2);
        end = pageNo + Math.floor(continues / 2);
        if (start < 1) {
          start = 1;
          end = continues;
        }
        if (end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return { start, end };
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  margin-right: 200px;
  width: 733px;
  height: 66px;
  overflow: hidden;
  float: right;

  .sui-pagination {
    margin: 18px 0;
    width: 770px;
    ul {
      margin-left: 0;
      margin-bottom: 0;
      vertical-align: middle;
      width: 500px;
      float: left;

      li {
        line-height: 18px;
        display: inline-block;

        button {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }

        &.active {
          a {
            background-color: rgb(81, 93, 227);
            color: #e1251b;
            border-color: #fff;
            cursor: default;
          }
        }

        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 0px 18px 13px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 241px;

      span {
        display: inline-block;
        margin-top: 10px;
      }
    }
  }
}
.active {
  background-color: skyblue !important;
}
</style>
